<template>
  <json-viewer
    :value="val"
    :expand-depth="5"
    boxed
    sort
    :show-array-index="false"
    copyable
  >
    <template v-slot:copy>
      <el-tooltip
        class="box-item"
        effect="dark"
        content="点击复制"
        placement="top"
        ><el-icon style="font-size: 20px" @click="click"
          ><CopyDocument /></el-icon
      ></el-tooltip>
    </template>
  </json-viewer>
</template>

<script lang="ts" setup name="sys-detail">
import { TRecord } from "@/components/crud/interface";
import { Drawer } from "@/components/model";
import { NzSafeAny } from "@/components/sf/type";
import { CopyDocument } from "@element-plus/icons-vue";
import { Http } from "@/core/api/http.service";
import { Subject } from "rxjs";
import JsonViewer from "vue-json-viewer";
import { reactive } from "vue";
import { Helper } from "@/core/helper/helper.service";
const props = defineProps<{
  helper: Drawer;
  openSub: Subject<null>;
  record?: TRecord;
  i: Record<string, NzSafeAny>;
}>();
const val = reactive({
  queryParams: {},
  requestBody: {},
  responseBody: {}
});
const click = () => {
  Helper.showMessage("复制成功");
};
if (props.i?.log) {
  Http.of()
    .get(`/lc-system/logger/detail/${props.i?.log}`)
    .then(
      (r: {
        queryParams: string;
        requestBody: string;
        responseBody: string;
      }) => {
        if (r) {
          val.queryParams = r.queryParams;
          val.requestBody = r.requestBody;
          val.responseBody = r.responseBody;
        }
      }
    );
}
</script>
@/components/crud/interfaces @/components/sf/types
